<template>
	<view class="login_warp">
		<Header left-path-type="navigateTo" leftPath="/pages/login/login"/>
		
		<view class="login_info">
			<view class="login_info_title">
				<view class="_title_msg">{{$t("login.email")}}</view>
				<view class="_title_msg_fg"></view>
			</view>
			<view class="login_info_item">
				<up-input
				    :placeholder="$t('common.email.placeholder')"
				    border="surround"
				    v-model="form.email"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<!-- 验证码登录 -->
			<view class="login_info_item" v-if="isEmailLoginWay">
				<InputCodeComm @getCode="getEmailCode" :codeNumberRef="form.email" :type="SMS_TYPE.LOGIN"/>
				<view class="email-msg-warp">{{$t('common.email.msg')}}</view>
			</view>
			<!-- 密码登录 -->
			<view class="login_info_item" v-else>
				<up-input
				    :placeholder="$t('login.pwd.placeholder')"
				    border="surround"
				    v-model="form.password"
					:customStyle="inputCss"
					:type="isShow ?'text':'password'"
				  >
				  <template #suffix style="margin-right: 10rpx;">
				  	<up-image v-if="isShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShow=false;"></up-image>
				  	<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShow=true;"></up-image>
				  </template>
			  </up-input>
			</view>
			<view class="cut_way_warp">
				<view v-if="isEmailLoginWay" @click="isEmailLoginWay = false;">{{$t('login.ammount.pwd')}}</view>
				<view v-else @click="isEmailLoginWay=true;">{{$t('login.code')}}</view>
				<view @click="resetPassword">{{$t('login.forget.pwd')}}</view>
			</view>
			<view class="but_comm_warp" @click="loginFun">
				<text style="margin-left: 10rpx;">{{$t('login.title')}}</text>
			</view>
			<view class="register_msg">{{$t('login.register1')}}<text class="register_msg_go" @click="jumpRegister">{{$t('login.register2')}}</text></view>
			<view class="policy_warp">
				<up-checkbox
					name="isCheck"
					usedAlone
					v-model:checked="isPolicy"
					shape="circle"
					activeColor="#265FFF"
					size="18"
					iconSize="18"
				>
					<template #label>
						<text>{{$t('login.policy1')}}</text>
						<text class="policy_a_warp" @click="jumpUserAgreement">《{{$t('login.policy2')}}》</text>
						<text>、</text>
						<text class="policy_a_warp" @click="jumpPrivacyAgreement">《{{$t('login.policy3')}}》</text>
						<text>、</text>
						<text class="policy_a_warp" @click="jumpProductAgreement">《{{$t('login.policy4')}}》</text>
					</template>
				</up-checkbox>
			</view>
		</view>
		
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm.vue';
	import { SMS_TYPE } from '@/utils/enumUtils.js';
	import InputCodeComm from '@/components/input-code-comm.vue';
	import { emailCodeLogin,emailPasswordLogin } from '@/api/auth.js';
	import { setStorageFun,TOKEN_NAME,USER_KEY,USER_DATA,USER_LOGIN_TIME } from '@/utils/auth.js';
	import CryptoJS from 'crypto-js';
	
	export default {
		components:{Header,InputCodeComm},
		computed: {
		   SMS_TYPE() {
		     return SMS_TYPE;
		   }
		},
		data() {
			return {
				isEmailLoginWay:true,// true:邮件验证码登录 false 密码登录
				form:{
					email:null,
					password:null,
					code:null
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				loginWay:'password',
				isShow:false,// 是否显示
				isPolicy:false,// 是否同意
				countdown:false,// 清空倒计时
				butLoading:false,
				startCountdown:false,
			}
		},
		
		methods: {
			jumpHome(){
				// const sysPlatform = getCurrentSysPlatform();
				// if(sysPlatform === "android"){
				// 	uni.switchTab({
				// 	    url: '/pages/message/message',
				// 	})
				// }else{
					uni.switchTab({
					    url: '/pages/home/home',
					})
				// }
				
			},
			async loginFun(){
				const then=this;
				const form=this.form;
				const params = {}
				if(!this.isPolicy){
					this.$refs.uToastRef.show({
						type: 'error',
						message: then.$t('login.policy.placeholder'),
					});
					return;
				}
				this.butLoading=true;
				let response={};
				// 邮箱登录
				if(this.isEmailLoginWay){
					params.email = form.email;
					params.code = form.code;
					response = await emailCodeLogin(params);
				}else{
					// 密码登录
					params.email = form.email;
					params.password = CryptoJS.MD5(form.password).toString();
					response = await emailPasswordLogin(params);
				}
				if(response && response.bizcode === 100){
					const data = response.data;
					setStorageFun(TOKEN_NAME,data.token);
					// 用于无感登录
					setStorageFun(USER_KEY,'');
					const userInfo = {
						appUrl:data.appUrl,
						avatarUrl:data.avatarUrl,
						inviteCode: data.inviteCode,
						name: data.name,
						userId: data.userId,
						email: data.email,
					};
					setStorageFun(USER_DATA,userInfo);
					// 当前登录得时间戳
					let currentTimeStamp = new Date().getTime();
					setStorageFun(USER_LOGIN_TIME,currentTimeStamp);
					this.butLoading=false;
					this.$refs.uToastRef.show({
						type: 'success',
						message: response.msg,
					});
					setTimeout(()=>{
						then.jumpHome();
					},2000);
				}
			},
			// 获取邮箱验证码
			getEmailCode(code){
				if(code){
					this.form.code = code;
				}
			},
			jumpRegister(){
				uni.redirectTo({
					url:"/pages/register/register",
				})
			},
			// 用户协议
			jumpUserAgreement(){
				uni.redirectTo({
					url: '/pages/mine_user_agreement/mine_user_agreement?backPath=login'
				})
			},
			// 隐私协议
			jumpPrivacyAgreement(){
				uni.redirectTo({
					url: '/pages/mine_privacy_agreement/mine_privacy_agreement?backPath=login'
				})
			},
			// 售后保障协议
			jumpProductAgreement(){
				uni.redirectTo({
					url: '/pages/mine_product_agreement/mine_product_agreement?backPath=login'
				})
			},
			// 忘记密码
			resetPassword(){
				uni.redirectTo({
					url: '/pages/reset_password/reset_password?back=login'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login_warp{
		height: calc(100vh - 0rpx);
		overflow: auto;
	}
	
	.login_info{
		margin-top: 60rpx;
		padding: 50rpx;
		.login_info_title{
			margin-bottom: 60rpx;
			._title_msg{
				font-weight: bold;
				font-size: 44rpx;
				color: #111111;
			}
			._title_msg_fg{
				width: 120rpx;
				height: 12rpx;
				background: #265FFF;
				margin: 10rpx 0 0 4%;
				
			}
		}
		
		.login_info_item{
			margin-bottom: 40rpx;
		}
		
		.code_msg{
			font-size: 36rpx;
			color: $app-bt-bj;
		}
	}
	.login_comm_but{
		background: #CCCCCC;
		border-radius: 20rpx;
		width: 100%;
		text-align: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #999999;
		padding: 28rpx 0;
		display: flex;
		justify-content: center;
	}
	.login_comm_but_yes{
		background: $app-bt-bj;
		color: #ffffff;
		margin-top: 80rpx;
	}
	.cut_way_warp{
		display:flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 20rpx;
	}
	.policy_warp{
		position: absolute;
		width: calc(100% - 90rpx);
	}
	.register_msg{
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		margin-top: 50rpx;
		.register_msg_go{
			color: #265FFF;
			cursor: pointer;
			text-decoration: underline
		}
	}
	.but_comm_warp{
		margin-top: 100rpx;
	}
	
</style>
